<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1400px"
      append-to-body
      center
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("basic_information") }}</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="24" v-if="fieldConfig.avatar">
              <el-form-item :label="$t('profie_picture')" prop="avatar">
                <image-upload v-model="form.avatar" :limit="1" />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.employeeName">
              <el-form-item :label="$t('display_name')" prop="employeeName">
                <el-input
                  v-model="form.employeeName"
                  :placeholder="
                    $t('please_enter', { name: $t('display_name') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.employeeCode">
              <el-form-item :label="$t('employee_code')" prop="employeeCode">
                <el-input
                  v-model="form.employeeCode"
                  :placeholder="
                    $t('please_enter', { name: $t('employee_code') })
                  "
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="fieldConfig.chineseName">
              <el-form-item :label="$t('chinese_name')" prop="chineseName">
                <el-input
                  disabled
                  v-model="form.chineseName"
                  :placeholder="
                    $t('please_enter', { name: $t('chinese_name') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.familyNameCn">
              <el-form-item :label="$t('surname')" prop="familyNameCn">
                <el-input
                  @input="chineseNameChange"
                  v-model="form.familyNameCn"
                  :placeholder="$t('please_enter', { name: $t('surname') })"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.nameCn">
              <el-form-item :label="$t('given_name')" prop="nameCn">
                <el-input
                  @input="chineseNameChange"
                  v-model="form.nameCn"
                  :placeholder="$t('please_enter', { name: $t('given_name') })"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.englishName">
              <el-form-item :label="$t('english_name')" prop="englishName">
                <el-input
                  disabled
                  v-model="form.englishName"
                  :placeholder="
                    $t('please_enter', { name: $t('english_name') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.familyNameEn">
              <el-form-item :label="$t('surname')" prop="familyNameEn">
                <el-input
                  @input="englishNameChange"
                  v-model="form.familyNameEn"
                  :placeholder="$t('please_enter', { name: $t('surname') })"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.middleName">
              <el-form-item :label="$t('middle_name')" prop="middleName">
                <el-input
                 @input="englishNameChange"
                  v-model="form.middleName"
                  :placeholder="$t('please_enter', { name: $t('middle_name') })"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.nameEn">
              <el-form-item :label="$t('given_name')" prop="nameEn">
                <el-input
                  @input="englishNameChange"
                  v-model="form.nameEn"
                  :placeholder="$t('please_enter', { name: $t('given_name') })"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.alias">
              <el-form-item :label="$t('alias')" prop="alias">
                <el-input
                  v-model="form.alias"
                  :placeholder="$t('please_enter', { name: $t('alias') })"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="fieldConfig.phone">
              <el-form-item :label="$t('mobile_number')" prop="phone">
                <el-input
                  v-model="form.phone"
                  :placeholder="
                    $t('please_enter', { name: $t('mobile_number') })
                  "
                >
                  <el-select
                    class="select-mobile_area_code"
                    v-model="form.areaCode"
                    slot="prepend"
                    :placeholder="$t('region')"
                    style="min-width: 60px"
                  >
                    <el-option
                      v-for="dict in dict.type.mobile_area_code"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option> </el-select
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.phoneHome">
              <el-form-item
                :label="$t('residential_phone_number')"
                prop="phoneHome"
              >
                <el-input
                  v-model="form.phoneHome"
                  :placeholder="
                    $t('please_enter', { name: $t('residential_phone_number') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.phoneOffice">
              <el-form-item
                :label="$t('office_phone_number')"
                prop="phoneOffice"
              >
                <el-input
                  v-model="form.phoneOffice"
                  :placeholder="
                    $t('please_enter', { name: $t('office_phone_number') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.email">
              <el-form-item :label="$t('personal_email')" prop="email">
                <el-input
                  v-model="form.email"
                  :placeholder="
                    $t('please_enter', { name: $t('personal_email') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.emailCompany">
              <el-form-item :label="$t('company_email')" prop="emailCompany">
                <el-input
                  v-model="form.emailCompany"
                  :placeholder="
                    $t('please_enter', { name: $t('company_email') })
                  "
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="fieldConfig.sex">
              <el-form-item :label="$t('gender')" prop="sex">
                <el-select
                  v-model="form.sex"
                  :placeholder="$t('please_select', { name: $t('gender') })"
                >
                  <el-option
                    v-for="dict in dict.type.leave_sex"
                    v-show="dict.value != 0"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.birthday">
              <el-form-item :label="$t('date_of_birth')" prop="birthday">
                <el-date-picker
                  clearable
                  v-model="form.birthday"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="
                    $t('please_select', { name: $t('date_of_birth') })
                  "
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.maritalStatus">
              <el-form-item :label="$t('marital_status')" prop="maritalStatus">
                <el-select
                  v-model="form.maritalStatus"
                  :placeholder="
                    $t('please_select', { name: $t('marital_status') })
                  "
                >
                  <el-option
                    v-for="dict in dict.type.leave_marital_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="parseInt(dict.value)"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.cardNo">
              <el-form-item :label="$t('identity_card_number')" prop="cardNo">
                <el-input
                  v-model="form.cardNo"
                  :placeholder="
                    $t('please_enter', { name: $t('identity_card_number') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.issuingCountry">
              <el-form-item
                :label="$t('identity_card_issuance_country')"
                prop="issuingCountry"
              >
                <el-input
                  v-model="form.issuingCountry"
                  :placeholder="
                    $t('please_enter', {
                      name: $t('identity_card_issuance_country'),
                    })
                  "
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="fieldConfig.otherDocumentTypes">
              <el-form-item
                :label="$t('other_identity_document_type')"
                prop="otherDocumentTypes"
              >
                <el-input
                  v-model="form.otherDocumentTypes"
                  :placeholder="
                    $t('please_enter', {
                      name: $t('other_identity_document_type'),
                    })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.otherDocumentNo">
              <el-form-item
                :label="$t('other_identity_document_numbers')"
                prop="otherDocumentNo"
              >
                <el-input
                  v-model="form.otherDocumentNo"
                  :placeholder="
                    $t('please_enter', {
                      name: $t('other_identity_document_numbers'),
                    })
                  "
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="fieldConfig.passportNumber">
              <el-form-item
                :label="$t('passport_number')"
                prop="passportNumber"
              >
                <el-input
                  v-model="form.passportNumber"
                  :placeholder="
                    $t('please_enter', { name: $t('passport_number') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.passportCountry">
              <el-form-item
                :label="$t('issuing_country')"
                prop="passportCountry"
              >
                <el-input
                  v-model="form.passportCountry"
                  :placeholder="
                    $t('please_enter', { name: $t('issuing_country') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.passportExpirationDate">
              <el-form-item
                :label="$t('passport_expiration_date')"
                prop="passportExpirationDate"
              >
                <el-date-picker
                  clearable
                  v-model="form.passportExpirationDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="
                    $t('please_select', {
                      name: $t('passport_expiration_date'),
                    })
                  "
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.birthPlace">
              <el-form-item :label="$t('place_of_birth')" prop="birthPlace">
                <el-input
                  v-model="form.birthPlace"
                  :placeholder="
                    $t('please_select', { name: $t('place_of_birth') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.nationality">
              <el-form-item :label="$t('nationality')" prop="nationality">
                <el-input
                  v-model="form.nationality"
                  :placeholder="$t('please_enter', { name: $t('nationality') })"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="fieldConfig.domicile">
              <el-form-item :label="$t('hukou')" prop="domicile">
                <el-input
                  v-model="form.domicile"
                  :placeholder="$t('please_enter', { name: $t('hukou') })"
                /> </el-form-item
            ></el-col>
            <el-col :span="8" v-if="fieldConfig.relationship">
              <el-form-item :label="$t('cpc_ccyl')" prop="relationship">
                <el-input
                  v-model="form.relationship"
                  :placeholder="$t('please_enter', { name: $t('cpc_ccyl') })"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="fieldConfig.socialSecurityNo">
              <el-form-item
                :label="$t('social_insurance_userid')"
                prop="socialSecurityNo"
              >
                <el-input
                  v-model="form.socialSecurityNo"
                  :placeholder="
                    $t('please_enter', { name: $t('social_insurance_userid') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.providentFundNo">
              <el-form-item
                :label="$t('housing_provident_fund_userid')"
                prop="providentFundNo"
              >
                <el-input
                  v-model="form.providentFundNo"
                  :placeholder="
                    $t('please_enter', {
                      name: $t('housing_provident_fund_userid'),
                    })
                  "
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="fieldConfig.addressResidential">
              <el-form-item
                :label="$t('residential_address')"
                prop="addressResidential"
              >
                <el-input
                  v-model="form.addressResidential"
                  :placeholder="
                    $t('please_enter', { name: $t('residential_address') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.addressCorrespondence">
              <el-form-item
                :label="$t('mailing_address')"
                prop="addressCorrespondence"
              >
                <el-input
                  v-model="form.addressCorrespondence"
                  :placeholder="
                    $t('please_enter', { name: $t('mailing_address') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="16" v-if="fieldConfig.remark">
              <el-form-item :label="$t('remarks')" prop="remark">
                <el-input
                  v-model="form.remark"
                  :placeholder="$t('please_enter', { name: $t('remarks') })"
                  type="textarea"
                  :rows="2"
                  :show-word-limit="true"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("emergency_contact_perosns") }}</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8" v-if="fieldConfig.emergencyContactName">
              <el-form-item :label="$t('name')" prop="emergencyContactName">
                <el-input
                  v-model="form.emergencyContactName"
                  :placeholder="$t('please_enter', { name: $t('name') })"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.emergencyContactRelation">
              <el-form-item
                :label="$t('relationship')"
                prop="emergencyContactRelation"
              >
                <el-input
                  v-model="form.emergencyContactRelation"
                  :placeholder="
                    $t('please_enter', { name: $t('relationship') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.emergencyContactPhone">
              <el-form-item
                :label="$t('contact_phone_number')"
                prop="emergencyContactPhone"
              >
                <el-input
                  v-model="form.emergencyContactPhone"
                  :placeholder="
                    $t('please_enter', { name: $t('contact_phone_number') })
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item
                :label="$t('remarks')"
                prop="emergencyContactRemark"
              >
                <el-input
                  v-model="form.emergencyContactRemark"
                  :placeholder="$t('please_enter', { name: $t('remarks') })"
                  type="textarea"
                  :rows="2"
                  :show-word-limit="true"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("experience") }}</span>
          </div>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAddExperienceInfo"
                >{{ $t("add") }}</el-button
              >
            </el-col>
          </el-row>
          <el-table :data="experienceVOList" ref="experienceInfo" border :max-height="tableHeight">
            <el-table-column
              :label="$t('type')"
              prop="type"
              width="150"
              v-if="fieldConfig.type"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.type"
                  :placeholder="$t('please_select', { name: '' })"
                >
                  <el-option
                    v-for="dict in dict.type.experience_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              v-if="fieldConfig.startTime"
              :label="$t('start_date')"
              prop="startTime"
              width="150"
            >
              <template slot-scope="scope">
                <el-date-picker
                  clearable
                  v-model="scope.row.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('please_select', { name: $t('start_date') })"
                  style="width: 100%"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              v-if="fieldConfig.endTime"
              :label="$t('ending_date')"
              prop="endTime"
              width="150"
            >
              <template slot-scope="scope">
                <el-date-picker
                  clearable
                  v-model="scope.row.endTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="
                    $t('please_select', { name: $t('ending_date') })
                  "
                  style="width: 100%"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              v-if="fieldConfig.content"
              :label="$t('content')"
              prop="content"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.content"
                  :placeholder="$t('please_enter', { name: $t('content') })"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('remarks')" prop="remark">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remark"
                  :placeholder="$t('please_enter', { name: $t('remarks') })"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('annex')" prop="annex">
              <template slot-scope="scope">
                <FileUpload
                  :isShowTip="false"
                  :value="scope.row.annex"
                  @input="(val) => (scope.row.annex = val)"
                ></FileUpload>
              </template>
            </el-table-column>
            <el-table-column :label="$t('action')" width="100">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDeleteExperienceInfo(scope.$index)"
                  >{{ $t("delete") }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("bank_information") }}</span>
          </div>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAddBankInfo"
                >{{ $t("add") }}</el-button
              >
            </el-col>
          </el-row>
          <el-table :data="bankVOList" ref="experienceInfo" border>
            <el-table-column
              v-if="fieldConfig.bankAccount"
              :label="$t('bank_account_number')"
              prop="bankAccount"
              width="150"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.bankAccount"
                  :placeholder="
                    $t('please_enter', { name: $t('bank_account_number') })
                  "
                />
              </template>
            </el-table-column>
            <el-table-column
              v-if="fieldConfig.accountHolder"
              :label="$t('bank_account_holder')"
              prop="accountHolder"
              width="150"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.accountHolder"
                  :placeholder="
                    $t('please_enter', { name: $t('bank_account_holder') })
                  "
                />
              </template>
            </el-table-column>

            <el-table-column
              v-if="fieldConfig.bankCode"
              :label="$t('bank_code')"
              prop="bankCode"
              width="150"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.bankCode"
                  :placeholder="$t('please_enter', { name: $t('bank_code') })"
                />
              </template>
            </el-table-column>
            <el-table-column
              v-if="fieldConfig.branchCode"
              :label="$t('branch_code')"
              prop="branchCode"
              width="150"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.branchCode"
                  :placeholder="$t('please_enter', { name: $t('branch_code') })"
                />
              </template>
            </el-table-column>
            <el-table-column
              v-if="fieldConfig.openingBank"
              :label="$t('bank_name_of_opening_account')"
              prop="openingBank"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.openingBank"
                  :placeholder="
                    $t('please_enter', {
                      name: $t('bank_name_of_opening_account'),
                    })
                  "
                />
              </template>
            </el-table-column>

            <el-table-column
              v-if="fieldConfig.defaultAccount"
              :label="$t('permission_of_default_bank_account')"
              prop="defaultAccount"
              width="150"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.defaultAccount"
                  :placeholder="
                    $t('please_select', {
                      name: $t('permission_of_default_bank_account'),
                    })
                  "
                >
                  <el-option
                    v-for="dict in dict.type.yes_or_no"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column :label="$t('remarks')" prop="remark">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remark"
                  :placeholder="$t('please_select', { name: $t('remarks') })"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('action')" width="100">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDeleteBankInfo(scope.$index)"
                  >{{ $t("delete") }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("employment_information") }}</span>
          </div>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAddemployee()"
                >{{ $t("add") }}</el-button
              >
            </el-col>
          </el-row>
          <el-table :data="employmentVOList" ref="experienceInfo" border>
            <el-table-column
              :label="$t('employing_company')"
              prop="employerName"
              width="150"
              v-if="fieldConfig.employerId"
            >
            </el-table-column>
            <el-table-column
              v-if="fieldConfig.employmentForm"
              :label="$t('employment_type')"
              prop="employmentForm"
              width="150"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.employment_type"
                  :value="scope.row.employmentForm"
                />
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('employee_status')"
              v-if="fieldConfig.employeeStatus"
              prop="employeeStatus"
              width="150"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.job_status"
                  :value="scope.row.employeeStatus"
                />
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('payroll_group')"
              prop="compensationGroupName"
            >
            </el-table-column>
            <el-table-column
              :label="$t('performance_group')"
              prop="performanceGroupName"
            >
            </el-table-column>

            <el-table-column
              :label="$t('holiday_group')"
              prop="vacationGroupName"
            >
            </el-table-column>
            <el-table-column
              :label="$t('attendance_group')"
              prop="attendanceGroupName"
            >
            </el-table-column>
            <el-table-column :label="$t('action')" width="100">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleAddemployee(scope.row, scope.$index)"
                  >{{ $t("edit") }}</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDeleteEmployee(scope.$index)"
                  >{{ $t("delete") }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitForm"
          :disabled="submitLoading"
          >{{ $t("confirm") }}</el-button
        >
        <el-button @click="cancel">{{ $t("cancel") }}</el-button>
      </div>
    </el-dialog>
    <AddEmployee
      @submit="addEmployeeSubmit"
      :fieldConfig="fieldConfig"
      ref="addEmployee"
    ></AddEmployee>
  </div>
</template>
<script>
import {
  addEmployee,
  updateEmployee,
  getEmployee,
} from "@/api/custom/employeeList";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import importModal from "@/views/components/custom/importModal.vue";
import employerSelect from "@/views/components/custom/employerSelect.vue";
import AddEmployee from "./addEmployee.vue";
export default {
  name: "Employee",
  dicts: [
    "depart_type",
    "leave_sex",
    "job_status",
    "employment_type",
    "yes_or_no",
    "salary_type",
    "leave_marital_status",
    "experience_type",
    "currency_type",
    "day_unit",
    "mobile_area_code",
  ],
  components: {
    Treeselect,
    importModal,
    employerSelect,
    AddEmployee,
  },
  props: {
    empId: null,
    type: null,
    fieldConfig: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        nameCn: "",
        familyNameCn: "",
        familyNameEn: "",
        nameEn: "",
      },
      // 表单校验
      rules: {
        employeeName: [
          {
            required: true,
            message: this.$t("cannot_empty", { name: this.$t("display_name") }),
            trigger: "blur",
          },
        ],
        employeeCode: [
          {
            required: true,
            message: this.$t("cannot_empty", {
              name: this.$t("employee_code"),
            }),
            trigger: "blur",
          },
        ],
        familyNameCn: [
          {
            required: true,
            message: this.$t("cannot_empty", { name: this.$t("surname") }),
            trigger: "blur",
          },
        ],
        nameCn: [
          {
            required: true,
            message: this.$t("cannot_empty", { name: this.$t("given_name") }),
            trigger: "blur",
          },
        ],
        familyNameEn: [
          {
            required: true,
            message: this.$t("cannot_empty", { name: this.$t("surname") }),
            trigger: "blur",
          },
        ],
        nameEn: [
          {
            required: true,
            message: this.$t("cannot_empty", { name: this.$t("given_name") }),
            trigger: "blur",
          },
        ],
        // middleName: [
        //   {
        //     required: true,
        //     message: this.$t('cannot_empty',{name:this.$t('middle_name')}),
        //     trigger: "blur",
        //   },
        // ],
        // alias: [
        //   {
        //     required: true,
        //     message: this.$t("cannot_empty", { name: this.$t("alias") }),
        //     trigger: "blur",
        //   },
        // ],
        phone: [
          {
            required: true,
            message: this.$t("cannot_empty", {
              name: this.$t("mobile_number"),
            }),
            trigger: "blur",
          },
          {
            pattern:  /^[0-9]{1,11}$/g,
            message: this.$t("correct_format"),
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: this.$t("cannot_empty", {
              name: this.$t("personal_email"),
            }),
            trigger: "blur",
          },
          {
            type: "email",
            message: this.$t("correct_format"),
            trigger: "blur",
          },
        ],
        emailCompany: [
          {
            type: "email",
            message: this.$t("correct_format"),
            trigger: "blur",
          },
        ],
        employerId: [
          {
            required: true,
            message: this.$t("cannot_empty", {
              name: this.$t("employing_company"),
            }),
            trigger: "change",
          },
        ],
        employment: {},
      },
      experienceVOList: [], //经历信息表格数据
      bankVOList: [], //银行信息
      employmentVOList: [], //雇员信息
      submitLoading: false,
      activeAddEmployee: null,
    };
  },
  watch: {},
  created() {},
  methods: {
    englishNameChange() {
      this.$set(
        this.form,
        "englishName",
        `${this.form.nameEn || ""} ${this.form.middleName || ""} ${this.form.familyNameEn || ""} `
      );
    },
    chineseNameChange() {
      this.$set(
        this.form,
        "chineseName",
        `${this.form.familyNameCn || ""}${this.form.nameCn || ""}`
      );
    },
    addEmployeeSubmit(e) {
      if (
        this.activeAddEmployee !== null &&
        this.activeAddEmployee !== undefined
      ) {
        this.$set(this.employmentVOList, this.activeAddEmployee, e);
      } else {
        if (!this.employmentVOList) this.employmentVOList = [];
        this.employmentVOList.push(e);
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = this.$t("add_new_employee");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getEmployee(id).then((response) => {
        let form = response.data;
        this.employmentVOList = form.employmentDTOList;
        this.$delete(form, "employmentDTOList");
        this.experienceVOList = form.experienceDTOList;
        this.bankVOList = form.bankDTOList;
        this.$delete(form, "experienceDTOList");
        // if (!form.employment) {
        //   form.employment = this.form.employment;
        // }
        // if (form.bankVOList) this.bankVOList = form.bankVOList;
        // if (form.experienceVOList)
        //   this.experienceVOList = form.experienceVOList;
        this.form = form;
        this.open = true;
        this.title = this.$t("edit");
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        nameCn: "",
        nameEn: "",
        familyNameCn: "",
        familyNameEn: "",
        englishName: "",
        chineseName: "",
        areaCode: "86",
      };
      this.experienceVOList = []; //经历信息表格数据
      this.employmentVOList = [];
      this.bankVOList = []; //银行信息
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.experienceVOList = this.experienceVOList || [];
          this.form.employmentVOList = this.employmentVOList || [];
          this.form.bankVOList = this.bankVOList || [];
          this.form.employmentVOList.map((e) => {
            if (e.nonFixedList) {
              e.nonFixedList = e.nonFixedList.map((item) => {
                if (item.effectiveDate) {
                  item.effectiveDate = item.effectiveDate + "-01";
                }
                return item;
              });
            }
          });
          if (this.form.id != null) {
            this.$prompt(
              this.$t("please_enter", { name: this.$t("reasons") }),
              this.$t("reasons"),
              {
                confirmButtonText: this.$t("confirm"),
                cancelButtonText: this.$t("cancel"),
                inputType: "textarea",
                inputPattern: /^.+$/,
                inputErrorMessage: this.$t("cannot_empty", {
                  name: this.$t("reasons"),
                }),
              }
            )
              .then(({ value }) => {
                this.form.reason = value;
                console.log("🐛 ~ updateEmployee ~ this.form:", this.form)

                updateEmployee(this.form).then((response) => {
                  this.$modal.msgSuccess(this.$t("operation_successful"));
                  this.open = false;
                  this.$emit("refreshList");
                });
              })
              .catch(() => {});
          } else {
            this.submitLoading = true;
            addEmployee(this.form)
              .then((response) => {
                this.$modal.msgSuccess(this.$t("operation_successful"));
                this.open = false;
                this.submitLoading = false;
                this.$emit("refreshList");
              })
              .catch(() => {
                this.submitLoading = false;
              });
          }
        }
      });
    },
    //新增经历信息表格
    handleAddExperienceInfo() {
      let obj = {
        type: null,
        startTime: null,
        endTime: null,
        content: null,
        remark: null,
      };
      if (!this.experienceVOList) this.experienceVOList = [];
      this.experienceVOList.push(obj);
    },
    //删除经历信息
    handleDeleteExperienceInfo(index) {
      this.experienceVOList.splice(index, 1);
    },
    handleDeleteEmployee(index) {
      this.$delete(this.employmentVOList, index);
    },
    handleAddemployee(row, index) {
      this.activeAddEmployee = index;
      this.$refs.addEmployee.open(row);
    },
    //新增银行信息
    handleAddBankInfo() {
      let obj = {
        bankAccount: null,
        accountHolder: null,
        bankCode: null,
        branchCode: null,
        openingBank: null,
        defaultAccount: null,
        remark: null,
      };
      if (!this.bankVOList) this.bankVOList = [];
      this.bankVOList.push(obj);
    },
    //删除银行信息
    handleDeleteBankInfo(index) {
      this.bankVOList.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.select-mobile_area_code {
  ::v-deep.el-input__inner {
    padding: 0 5px;
  }
}
</style>
